<template>
  <div class="detail-group" v-if="Object.keys(fansList).length > 0 || Object.keys(groupList).length > 0">
    <template v-if="+$route.params.group > 0">
      <ul class="fans" v-if="Object.keys(fansList).length > 0">
        <li
          v-for="(item, index) in fansList"
          :key="index"
        >
          <div class="image">
            <img v-lazy="item.user.avatar" />
          </div>
          <div class="desc">
            <span class="time">{{ item.create_time }}</span>
            <span class="text">参与了此团</span>
          </div>
        </li>
      </ul>
    </template>
    <template v-else>
      <ul class="group" v-if="Object.keys(groupList).length > 0">
        <li
          v-for="(item, index) in groupList"
          :key="index"
          @click="$emit('go', item.id)"
        >
          <div class="image">
            <img v-lazy="item.user.avatar" />
          </div>
          <div class="desc">
            <span class="time">{{ item.create_time }}</span>
            <span class="text">发起了拼团</span>
            <span class="button">立即拼团</span>
          </div>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Group',
  props: ['groupList', 'fansList']
}
</script>

<style scoped lang="stylus">
.detail-group
  .group
    margin 10px
    padding 15px
    background white
    border-radius 10px
    li
      display flex
      align-items center
      .image
        width 60px
        padding 10px
        img
          border-radius 50%
      .desc
        flex 1
        display flex
        justify-content space-between
        .button
          color red
  .fans
    margin 10px
    padding 15px
    background white
    border-radius 10px
    li
      display flex
      align-items center
      .image
        width 60px
        padding 10px
        img
          border-radius 50%
      .desc
        flex 1
        display flex
        justify-content start
        span
          margin 0 5px
</style>
